<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="layout" content="main" />
	<title>Using yui datatable for list bookmarks</title>

  <yui:javascript dir="element" file="element-beta-min.js" />
  <yui:javascript dir="yahoo-dom-event" file="yahoo-dom-event.js" />
  <yui:javascript dir="dragdrop" file="dragdrop-min.js" />
  <yui:javascript dir="datasource" file="datasource-min.js" />
  <yui:javascript dir="datatable" file="datatable-min.js" />


<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for this example */
.yui-skin-sam .yui-dt-liner { white-space:nowrap; } 
th {
    background: #fff url(../images/skin/shadow.jpg);
    color: #666;
    font-size: 11px;
    font-weight: bold;
    line-height: 7px;
    padding: 2px 6px;
}
</style>

<!--end custom header content for this example-->

</head>

<body class=" yui-skin-sam">


<h1>Using yui datatable for list bookmarks</h1>
<br>
<div class="exampleIntro">
	<p>A demonstration of the DataTable's basic feature set.</p>
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== 
{key:"id", sortable:true, resizeable:true},
            {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
            {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true},
            {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true},
            {key:"title", sortable:true, resizeable:true}

-->
<div id="basic"></div>

<script type="text/javascript" src="http://developer.yahoo.com/yui/examples/datatable/assets/js/data.js"></script>

<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Basic = function() {
        var myColumnDefs = [
            {key:"title", sortable:true, resizeable:true},
            {key:"url", sortable:true, resizeable:true},
            {key:"tags", sortable:true, resizeable:true}
        ];

        var myDataSource = new YAHOO.util.LocalDataSource([
																													<g:each in="${bookmarks}" var="bookmark">
																													  { 
																														 title:"${bookmark.title}",
																														 url:"${bookmark.url}",
																														 tags:"<g:collect in="${bookmark.tags}" expr="${it.name}">${it},</g:collect>"
																														},
																													</g:each>
																													]);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["title","url","tags"]
        };

        var myDataTable = new YAHOO.widget.DataTable("basic",
                myColumnDefs, myDataSource, {caption:"Bookmarks al momento"});
                
        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->
